<template>
    <view>
        <NavBar :title="'残疾人基本信息'" />
        <scroll-view scroll-y="true" class="scroll-Y">
            <!-- 姓名 -->
            <view class="uni-form-item uni-column">
                <view class="title">
                    <text class="content">姓名</text>
                    <text class="icon">*</text>
                </view>
                <input type="text" placeholder="请输入" v-model="form.name" />
            </view>
            <!-- 性别 -->
            <view class="uni-form-item uni-column" @click="sexShow = true">
                <view class="title">
                    <text class="content">性别</text>
                    <text class="icon">*</text>
                </view>
                <view class="input-row">
                    <text class="input-value">{{ form.sex || '请选择' }}</text>
                    <u-icon name="arrow-right" size="22"></u-icon>
                </view>
            </view>
            <!-- 身份证号 -->
            <view class="uni-form-item uni-column">
                <view class="title">
                    <text class="content">身份证号</text>
                    <text class="icon">*</text>
                </view>
                <input type="text" placeholder="请输入" v-model="form.idCard" />
            </view>
            <!-- 户口性质 -->
            <view class="uni-form-item uni-column">
                <view class="title">
                    <text class="content">户口性质</text>
                    <text class="icon">*</text>
                </view>
                <input type="text" placeholder="请输入" v-model="form.household" />
            </view>
            <!-- 文化程度 -->
            <view class="uni-form-item uni-column" @click="eduShow = true">
                <view class="title">
                    <text class="content">文化程度</text>
                    <text class="icon">*</text>
                </view>
                <view class="input-row">
                    <text class="input-value">{{ form.education || '请选择' }}</text>
                    <u-icon name="arrow-right" size="22"></u-icon>
                </view>
            </view>
            <!-- 联系电话 -->
            <view class="uni-form-item uni-column">
                <view class="title">
                    <text class="content">联系电话</text>
                    <text class="icon">*</text>
                </view>
                <input type="text" placeholder="请输入" v-model="form.phone" />
            </view>
            <!-- 残疾类别 -->
            <view class="uni-form-item uni-column">
                <view class="title">
                    <text class="content">残疾类别</text>
                    <text class="icon">*</text>
                </view>
                <view class="disability-list">
                    <u-checkbox-group v-model="form.disability" placement="column" @change="checkboxChange">
                        <u-checkbox
                            :customStyle="{ marginBottom: '8px' }"
                            v-for="(item, index) in disabilityTypes"
                            :key="index"
                            :label="item.name"
                            :name="item.name"
                        >
                            <!-- disability-item -->
                        </u-checkbox>
                    </u-checkbox-group>
                </view>
            </view>

            <!-- 性别选择弹窗 -->
            <u-action-sheet
                :show="sexShow"
                :actions="sexList"
                title="请选择性别"
                @close="sexShow = false"
                @select="sexSelect"
            />
            <!-- 文化程度选择弹窗 -->
            <u-action-sheet
                :show="eduShow"
                :actions="eduList"
                title="请选择文化程度"
                @close="eduShow = false"
                @select="eduSelect"
            />
        </scroll-view>
        <view class="but">
            <view class="submit" @click="submitClick">提交</view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            sexShow: false,
            eduShow: false,
            sexList: [{ name: '男' }, { name: '女' }],
            eduList: [{ name: '小学' }, { name: '初中' }, { name: '高中' }, { name: '本科' }, { name: '研究生' }],
            disabilityTypes: [
                {
                    name: '视力',
                    disabled: false
                },
                {
                    name: '听力',
                    disabled: false
                },
                {
                    name: '言语',
                    disabled: false
                },
                {
                    name: '肢体',
                    disabled: false
                },
                {
                    name: '智力',
                    disabled: false
                },
                {
                    name: '精神',
                    disabled: false
                }
            ],
            form: {
                name: '',
                sex: '',
                idCard: '',
                household: '',
                education: '',
                phone: '',
                disability: []
            }
        };
    },
    methods: {
        sexSelect(e) {
            this.form.sex = e.name;
            this.sexShow = false;
        },
        eduSelect(e) {
            this.form.education = e.name;
            this.eduShow = false;
        },
        checkboxChange(n) {
            console.log('change', n);
        },
        // 提交表单
        submitClick() {
            console.log('提交表单');
            this.$u.toast('提交成功');
            this.$u.route({
                url: '/pages/fromTable/disabled/index'
            });
        }
    }
};
</script>

<style lang="scss" scoped>
.scroll-Y {
    width: 100%;
    padding: 46rpx 0;
    height: calc(100vh - 369rpx);
    background-color: #fff;
    font-family: PingFang SC, PingFang SC;
    .uni-column {
        font-weight: 400;
        font-size: 31rpx !important;
        color: rgba(0, 0, 0, 0.8);
        padding: 15rpx 0;
        width: 90%;
        margin: 0 auto;
        border-bottom: 1rpx solid #d0d3d6;
    }
    .title {
        margin-bottom: 20rpx;
        display: flex;
        align-items: center;
        .icon {
            font-weight: 400;
            font-size: 27rpx;
            color: #dc0000;
            margin-left: 8rpx;
        }
        .content {
            font-weight: 400;
            font-size: 27rpx;
            color: rgba(0, 0, 0, 0.6);
        }
    }
    .disability-list {
        margin-top: 10rpx;
        display: flex;
        flex-direction: column;
        gap: 18rpx;
    }
    .disability-item {
        display: flex;
        align-items: center;
        font-size: 31rpx;
        color: #333;
    }
}
.but {
    padding-top: 15rpx;
    background-color: #ffffff;
    border-top: 1rpx solid #d0d3d6;
    .submit {
        margin: 0 auto;
        width: 688rpx;
        height: 92rpx;
        background: #2c5e9f;
        border-radius: 8rpx;
        font-weight: 400;
        font-size: 29rpx;
        color: #ffffff;
        line-height: 92rpx;
        text-align: center;
    }
}
.input-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 60rpx;
    font-size: 32rpx;
    color: #333;
}
.input-value {
    color: #333;
    flex: 1;
}
</style>
